<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>US regions</title>
    <link rel="icon" href="../favicon.ico"/>

    <!-- Add Popoto default CSS styles -->
    <link rel="stylesheet" href="../node_modules/popoto/dist/popoto.min.css">
    <link rel="stylesheet" href="../shared.css">

    <style>
        /* Classes used by region SVG paths */

        .region-back {
            fill: #2e3138;
        }

        .region-highlight {
            fill: #f0b017;
        }
    </style>
</head>

<body class="ppt-body">

<section class="ppt-section-main" style="height: 900px">

    <div class="ppt-section-header">
        <span class="ppt-header-span">US regions -</span> example
    </div>

    <!-- By default the graph is generated on the HTML element with ID "popoto-graph"
     If needed this id can be changed with property "popoto.graph.containerId" -->
    <div id="popoto-graph" class="ppt-div-graph">
        <!-- Graph is generated here-->
    </div>

</section>

<!-- Required scripts -->
<script src="../shared.js" charset="utf-8"></script>
<script src="../node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
<script src="../node_modules/neo4j-driver-lite/lib/browser/neo4j-lite-web.min.js" charset="utf-8"></script>
<script src="../node_modules/popoto/dist/popoto.min.js" charset="utf-8"></script>

<!-- Add regions svg paths from a js file -->
<script src="svg-us-region-data.js" charset="utf-8"></script>
<script>

    var driver = neo4j.driver(
        "neo4j+s://dff437fa.databases.neo4j.io",
        neo4j.auth.basic("popoto", "popotopassword"),
    );

    popoto.runner.DRIVER = driver

    popoto.query.filterRelation = function (d) {
        return false;
    };

    // Define the list of label provider to customize the graph behavior:
    popoto.provider.node.Provider = {
        "Region": {
            "returnAttributes": ["code"],
            "constraintAttribute": "code",
            "getDisplayType": function () {
                return popoto.provider.node.DisplayTypes.SVG;
            },
            "getSize": function (node) {
                return 70;
            },
            "getSVGPaths": function (node) {
                // Create the list of SVG path to draw the node.
                // A path here is composed of two elements: the SVG path ("d" attribute) and a CSS class
                var paths = [];

                // In this example the paths are stored in "USRegionsSVGPaths" variable defined in svg-location-data.js referenced script.
                // But here you could consider using json, generated path, a dedicated service or even paths stored in node attribute data.

                // Add US background path:
                paths = paths.concat(USRegionsSVGPaths["US"]);

                // Then depending on node type add the path of the region.
                if (node.type === popoto.graph.node.NodeTypes.VALUE) {
                    // The node is an expanded value then the path corresponding to the region name is added:
                    paths = paths.concat(USRegionsSVGPaths["US-" + node.attributes.code]);
                } else {
                    if (node.value && node.value.length !== 0) {
                        // The node is an expandable node with a selected value then the path corresponding to the selected value region name is added:
                        paths = paths.concat(USRegionsSVGPaths["US-" + node.value[0].attributes.code]);
                    }
                }
                return paths;
            },
            // Change displayed text to display full region name instead of code.
            "getTextValue": function (node) {
                if (node.type === popoto.graph.node.NodeTypes.VALUE) {
                    return RegionCodeMapping[node.attributes.code];
                } else {
                    if (node.value === undefined || node.value.length === 0) {
                        return node.label;
                    } else {
                        return RegionCodeMapping[node.value[0].attributes.code];
                    }
                }
            },
            // Disable the displayed text on nodes to only see drawn paths
            "getIsTextDisplayed": function (node) {
                return false;
            }

        }

    };

    driver.verifyConnectivity().then(function () {
        // Start the generation using parameter as root label of the query.
        popoto.start("Region");
    }).catch(function (error) {
        document.getElementById("modal").style.display = "block";
        document.getElementById("error-content").innerText = error;
        console.error(error)
    })

</script>
</body>
</html>
